<template>
  <div class="homeLogin">
    <div class="login-table">
      <div class="login-type">
        <el-radio-group v-model="loginType">
          <el-radio value="1" size="large">管理员</el-radio>
          <el-radio value="2" size="large">报修人员</el-radio>
          <el-radio value="3" size="large">维修人员</el-radio>
        </el-radio-group>
      </div>
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-btn">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { ElMessage } from 'element-plus'
import { useStore } from "vuex";
import api from '@/api/axiosConfig'

export default {
  name: 'HomeView',
  data() {
    return {
      store: useStore(),
      loginType: '1',
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    load(type) {
      if (type === '1') {
        api.post('/manager/login', this.loginForm).then(res => {
          this.store.commit('token/setToken', res.data.token);
          this.store.commit('manager/setInfo', res.data.manager);
          router.push('/manager/view/task');
          ElMessage.success('登录成功');
        }).catch(err => {
          console.log(err);
          ElMessage.error('登录失败')
        })
      }
      if (type === '2') {
        api.post('/user/login', this.loginForm).then(res => {
          this.store.commit('token/setToken', res.data.token);
          this.store.commit('user/setInfo', res.data.user);
          router.push('/user/view/task');
        }).catch(err => {
          console.log(err);
          ElMessage.error('登录失败')
        })
      }
      if (type === '3') {
        api.post('/worker/login', this.loginForm).then(res => {
          this.store.commit('token/setToken', res.data.token);
          console.log(res.data.token);
          this.store.commit('worker/setInfo', res.data.worker);
          router.push('/worker/view/task');
        }).catch(err => {
          console.log(err);
          ElMessage.error('登录失败')
        })
      }
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.load(this.loginType)
        } else {
          ElMessage.error('登录失败')
        }
      })
    },
    resetForm() {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style scoped>
.homeLogin {
  display: flex;
  flex-direction: column;
  height: 95vh;
  background-color: white;
  align-items: center;
  justify-content: center;

  .login-table {
    width: 400px;
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 5px #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .login-type {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-radio {
        margin-right: 20px;
      }
    }

    .login-form {
      display: flex;
      flex-direction: column;

      .el-input {
        width: 240px;

      }
    }

    .login-btn {
      margin-top: 20px;

    }
  }
}
</style>